<!DOCTYPE html>
<html>

<head>
    <title>服务器统计</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/main.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/dist/bootstrap-table.min.css">
    <script src="/dist/bootstrap-table.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.2/locale/bootstrap-table-zh-CN.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/dist/element-ui.js"></script>
</head>

<body>
    <div id="app">
    	<div class="navTop">
	        <a href="#" class="logoimg"><img src="/img/logo.png" alt=""></a>
	        <div class="nav_right">
	            <a href="/home" class="nav_icon indexicon"></a>
	            <a href="/member.html" class="nav_icon userlisticon"></a>
	            <a href="/host.html" class="nav_icon servericon"></a>
	            <a href="javascript:void(0);" class="nav_icon logouticon"></a>
	        </div>
	    </div>
	    <div class="mainContent">
	        <div class="mainContent_box">
	            <h3 class="listTitle">数据库列表</h3>
	            <div class="listBox">
			        <table id="table" data-height="800" data-align="center" data-title="数据库列表" data-toggle="table" data-striped="false" data-classes="table table-hover">
			        </table>
			    </div>
			</div>
		</div>

        <el-dialog title="服务器备份文件" :center="true" :visible="dbfview" @open="open" @opened="opened" @close="close" width="70%">
            <table id="dbflist" data-search="true" data-page-size="20" data-pagination="true" data-align="center" data-title="服务器备份文件" data-striped="false" data-classes="table table-hover">
            </table>
        </el-dialog>
    </div>
</body>

</html>
<script type="text/javascript">
var app = new Vue({
    el: "#app",

    data: {
        dbfview: false,
        dbfdata: [],
    },
    methods: {
        open() {
            if (!this.dbfview) {
                this.dbfview = true
            }
        },
        opened() {
            setTimeout(function() {
                $('#dbflist').bootstrapTable("destroy").bootstrapTable({
                    align: "center",
                    search: true,
                    data: app.dbfdata,
                    columns: [{
                        field: 'file_name',
                        title: '文件名',
                        align: 'center'
                    }, {
                        field: 'file_source_size',
                        title: '文件大小',
                        formatter: showsize,
                        align: 'center'
                    }, {
                        field: 'keyfile',
                        title: '秘钥文件',
                        align: 'center'
                    }, {
                        field: 'file_md5',
                        title: '文件校验码',
                        align: 'center'
                    }, {
                        field: 'create_time',
                        title: '备份时间',
                        align: 'center'
                    }],

                });

                function showsize(value, row, index) {
                    return parseFloat(value)
                }
            }, 1)
        },
        close() {
            if (this.dbfview) {
                this.dbfview = false
            }
        }

    }
});

$('#table').bootstrapTable({
    url: "/home/dbs-list" + window.location.search,
    align: "center",
    columns: [{
        field: 'database_name',
        title: '数据库名',
        formatter: detailslink
    }, {
        field: 'memberuuid',
        title: '用户uuid'
    }, {
        field: 'nickname',
        title: '服务器所属人'
    }, {
        field: 'create_time',
        title: '初次备份时间'
    }],

});

function detailslink(value, row, index) {
    return '<a href="javascript:void(0)" onclick="showfile(' + row.id + ')">' + value + '</a>';
}


function showfile(dbid) {



    $.ajax({
        url: "/home/dbf-list?database_id=" + dbid,
        datatype: "json",
        type: "get",
        success: function(data) {
            app.dbfdata = data
            if (!app.dbfview) {
                app.dbfview = true
            }
        }
    })



}
</script>